<script setup lang="ts">
	import { computed, ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { stockDetail, stockModify, stockCheck } from '@/package_salesman_check/api/home'
	import { useNotify } from '@/hooks/web/useNotify/index.js'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	interface RouteParams {
		id : string,
		check_status : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		check_status: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		if (Number(routeParams.value.check_status) == 2) {
			currentIndex.value = 1
			currentTabsItem.value.id = 2
		}
	})

	const useTabs = () => {
		const currentIndex = ref(0)
		const tabsColumns = computed(() => {
			return [
				{
					name: '未盘点',
					id: 1
				},
				{
					name: '已盘点',
					id: 2
				}
			]
		})

		const currentTabsItem = computed(() => {
			return unref(tabsColumns)[unref(currentIndex)]
		})

		return {
			currentIndex,
			tabsColumns,
			currentTabsItem
		}
	}
	const { tabsColumns, currentIndex, currentTabsItem } = useTabs()

	const paging = ref()
	const useCURD = () => {
		const dataList = ref([])
		const query = ref({
			goods_name: ''
		})

		const getList = async (page : number, limit : number) => {
			const params = { page, limit, check_status: unref(currentTabsItem).id, id: routeParams.value.id, ...query.value }
			try {
				const res = await stockDetail(params)

				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			query
		}
	}
	const { dataList, getList, searchAction, query } = useCURD()

	// 盘点
	const show = ref(false)
	const dataiPopup = ref({})
	const close = () => {
		show.value = false
	}
	const openGoodsPopup = (item) => {
		dataiPopup.value = item
		show.value = true
	}
	const submitLoading = ref(false)
	// 盘点确定
	const determine = async () => {
		submitLoading.value = true
		try {
			const params = {
				id: dataiPopup.value.id,
				dealer_goods_id: dataiPopup.value.dealer_goods_id,
				spec: dataiPopup.value.goods.spec
			}
			const res = await stockModify(params)
			showNotify({
				type: 'success',
				top: 0,
				message: res.msg
			})
			show.value = false
			paging.value?.reload()
		} catch (err) {
			showNotify({
				type: 'error',
				top: 0,
				message: err.msg
			})
		} finally {
			submitLoading.value = false
		}
	}
	// 盘点完成
	// const stocktaking = () => {
	// 	showModal.value = true
	// }
	// const showModal = ref(false)
	// const content = ref('确定盘点完成吗？')
	// const cancel = () => {
	// 	showModal.value = false
	// }
	// const confirm = async () => {
	// 	try {
	// 		const params = {
	// 			id: routeParams.value.id
	// 		}
	// 		const res = await stockCheck(params)
	// 		showNotify({
	// 			type: 'success',
	// 			message: res.msg
	// 		})
	// 		showModal.value = false
	// 		uni.redirectTo({
	// 			url: `/pages/Inventory/index`
	// 		})
	// 	} catch (err) {
	// 		showNotify({
	// 			type: 'error',
	// 			message: err.msg
	// 		})
	// 	}
	// }
</script>

<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="search-wrap">
				<up-search v-model="query.goods_name" @search="searchAction" @custom="searchAction"
					@clear="searchAction" showAction actionText="搜索" animation shape="square"
					bgColor="rgba(243, 242, 245, 1)"></up-search>
			</view>
			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs v-model:current="currentIndex" @change="searchAction" :list="tabsColumns"
						:activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)" :scrollable="false">
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main">
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 400rpx)">
				<view class="main-box" v-for="(item,index) in dataList" :key="index">
					<view class="main-header">
						<view class="header-name">{{item.goods?.name}}</view>
					</view>
					<view class="goods-box">
						<view class="box-left">
							<view class="main-jl">商品条码：<text
									style="color: rgba(2, 14, 36, 1);">{{item.goods?.code69}}</text>
							</view>
							<view class="main-jl">库存数量：<text style="color: rgba(2, 14, 36, 1);">{{item.num}}</text>
							</view>
							<!-- <view class="main-jl">商品规格：<text
									style="color: rgba(2, 14, 36, 1);">{{item.spec?.unit}}</text>
							</view> -->
							<view class="main-jl" v-if="currentIndex == 1">盘点后数量：<text
									style="color: rgba(2, 14, 36, 1);">{{item.check_num}}</text>
							</view>
							<view class="main-jl" v-if="currentIndex == 1">差异数量：<text
									:style="{color: item.color}">{{item.diff_num}}</text>
							</view>
						</view>
						<view class="box-right">
							<image style="width: 100rpx;height: 100rpx;" :src="item.goods?.image">
							</image>
						</view>
					</view>
					<view class="goods-button" v-if="routeParams.check_status == 1" @click="openGoodsPopup(item)">去盘点
					</view>
				</view>
			</z-paging>
			<!-- <view class="stocktaking" v-if="routeParams.check_status == 1">
				<up-button text="盘点完成" @click="stocktaking" color="rgba(55, 131, 252, 1)"></up-button>
			</view> -->
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
	<up-popup :show="show" @close="close" :round="10" mode="center">
		<view class="popup-box">
			<view class="popup-header">
				<view class="header-name">盘点</view>
			</view>
			<view class="box-maon">
				<view class="maon-name">{{dataiPopup.goods?.name}}</view>
				<block v-for="item in dataiPopup.goods?.spec" :key="item.id">
					<view class="maon-input">
						<up-number-box v-model="item.num" :step="1" :min="0"
							inputWidth="calc(100% - 2em)"></up-number-box>
						{{ item.unit }}
					</view>
				</block>
			</view>
			<view class="quxiao" @click="close">取消</view>
			<view class="determine">
				<up-button text="确定" :loading="submitLoading" @click="determine"
					color="rgba(55, 131, 252, 1)"></up-button>
			</view>
		</view>
	</up-popup>
	<!-- <up-modal :show="showModal" :showCancelButton="true" :content='content' @confirm="confirm"
		@cancel="cancel"></up-modal> -->
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 249rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;

		.search-wrap {
			display: flex;
			align-items: center;
			width: 100%;
			height: 64rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			background: rgba(243, 242, 245, 1);
		}
	}

	.main {
		width: 100%;
		height: calc(100vh - 369rpx);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.main-box {
			width: 702rpx;
			// height: 402rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			position: relative;

			.main-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}
			}

			.goods-box {
				display: flex;
				justify-content: space-between;

				.box-left {

					.main-jl {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
						margin-bottom: 20rpx;
					}
				}

				.box-right {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}
			}

			.goods-button {
				width: 654rpx;
				height: 80rpx;
				border-radius: 1008rpx;
				background: rgba(15, 127, 255, 1);
				margin: 30rpx auto;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 80rpx;
			}
		}

		.stocktaking {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 150rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
		}
	}

	.popup-box {
		width: 702rpx;
		// height: 718rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);

		.popup-header {
			width: 702rpx;
			height: 104rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			background: rgba(15, 127, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
		}

		.box-maon {
			padding: 30rpx;
			box-sizing: border-box;

			.maon-name {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(2, 14, 36, 1);
				margin-bottom: 30rpx;
			}

			.maon-input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				width: 100%;
				height: 82rpx;
				border-radius: 12rpx;
				// background: rgba(242, 243, 245, 1);
			}
		}

		.quxiao {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(100, 101, 102, 1);
			margin: 30rpx auto;
			text-align: center;
		}

		.determine {
			width: 654rpx;
			height: 80rpx;
			margin: 0rpx auto;
		}
	}
</style>